<template>
  <div>
    <div style="background: #e8f1f8">
      <div
        class="det_tab"
        v-if="isDate"
      >
        <div class="det_tab_item">
          <eagle-cell-group>
            <div style="padding: 10px">基本信息</div>
            <div style="padding-bottom: 10px; padding-top: 10px; display: flex">
              <div style="
                  color: #646566;
                  padding-left: 15px;
                  width: 125px;
                  font-size: 14px;
                ">
                制度名称
              </div>
              <div style="
                  color: #646566;
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                ">
                {{ form.HandBookName || form.OperateRuleName }}
              </div>
            </div>
            <eagle-input
              label="制度版本"
              class="input_text"
              :value="form.VersionNo"
              readonly
            />
            <eagle-input
              v-if="form.ImplementDate"
              label="实施日期"
              class="input_text"
              :value="form.ImplementDate|formatDateTime"
              readonly
            />
            <eagle-input
              label="最近修改人"
              class="input_text"
              :value="form.EditChnName"
              readonly
            />
            <eagle-input
              label="最近修改时间"
              class="input_text"
              :value="form.EditDate|formatDateTime"
              readonly
            />
          </eagle-cell-group>
        </div>
      </div>
      <div
        class="det_tab"
        v-if="isDate2"
      >
        <div class="det_tab_item">
          <eagle-cell-group>
            <div style="padding: 10px">基本信息</div>
            <div style="padding-bottom: 10px; padding-top: 10px; display: flex">
              <div style="
                  color: #646566;
                  padding-left: 16px;
                  width: 125px;
                  font-size: 14px;
                ">
                制度名称
              </div>
              <div style="
                  color: #646566;
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                ">
                {{ form2.OperateRuleName }}
              </div>
            </div>
            <eagle-input
              label="制度版本"
              class="input_text"
              :value="form2.VersionNo"
              readonly
            />
            <eagle-input
              label="解释部门"
              class="input_text"
              :value="form2.ExplainOrgName"
              readonly
            />
            <eagle-input
              label="适用岗位"
              class="input_text"
              :value="form2.ApplyOrgAndPostName"
              readonly
            />
            <eagle-input
              label="最近修改人"
              class="input_text"
              :value="form2.EditChnName"
              readonly
            />
            <eagle-input
              label="最近修改时间"
              class="input_text"
              :value="gettimeS(form2.EditDate)"
              readonly
            />
          </eagle-cell-group>
        </div>
      </div>

      <div
        class="det_tab"
        v-if="isDate3"
      >
        <div class="det_tab_item">
          <eagle-cell-group>
            <div style="padding: 10px">基本信息</div>
            <div style="padding-bottom: 10px; padding-top: 10px; display: flex">
              <div style="
                  color: #646566;
                  padding-left: 16px;
                  width: 125px;
                  font-size: 14px;
                ">
                制度名称
              </div>
              <div style="
                  color: #646566;
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                ">
                {{ form3.CompileName }}
              </div>
            </div>
            <eagle-input
              label="最近修改人"
              class="input_text"
              :value="form3.EditChnName"
              readonly
            />
            <eagle-input
              label="最近修改时间"
              class="input_text"
              :value="form3.EditDate|formatDateTime"
              readonly
            />
            <div
              style="padding-bottom: 10px; padding-top: 10px; display: flex"
              @click.stop="lookPdf(form3.AttMiddlePath, form3.ID)"
            >
              <div style="padding-left: 16px; width: 125px; font-size: 14px">
                签发版本
              </div>
              <div style="
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                  color: #1989fa;
                ">
                {{ form3.AttName || "暂无名称" }}
              </div>
            </div>
          </eagle-cell-group>
        </div>
      </div>
      <div
        class="det_tab"
        v-if="isDate4"
      >
        <div class="det_tab_item">
          <eagle-cell-group>
            <div style="padding: 10px">基本信息</div>
            <eagle-input
              label="管理要求"
              class="input_text"
              :value="form4.RequirementName"
              readonly
            />

            <div style="padding-bottom: 10px; padding-top: 10px; display: flex">
              <div style="
                  color: #646566;
                  padding-left: 16px;
                  width: 125px;
                  font-size: 14px;
                ">
                制度名称
              </div>
              <div style="
                  color: #646566;
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                ">
                {{ form4.RegulationName }}
              </div>
            </div>
            <eagle-input
              label="最近修改人"
              class="input_text"
              :value="form4.EditChnName"
              readonly
            />
            <eagle-input
              label="最近修改时间"
              class="input_text"
              :value="form4.EditDate|formatDateTime"
              readonly
            />
            <eagle-input
              label="在线编辑版"
              class="input_text"
              :value="isOnlineName"
              readonly
            />
            <div
              style="padding-bottom: 10px; padding-top: 10px; display: flex"
              @click.stop="lookPdf(form4.AttMiddlePath, form4.ID)"
            >
              <div style="padding-left: 16px; width: 125px; font-size: 14px">
                文件
              </div>
              <div style="
                  font-size: 14px;
                  flex: 1;
                  overflow: hidden;
                  margin-right: 5px;
                  color: #1989fa;
                ">
                {{ form4.AttName }}
              </div>
            </div>
          </eagle-cell-group>
        </div>
      </div>
      <div
        class="coursedetail"
        style="margin-top: 5px"
        v-if="isDatePublic"
      >
        <div style="padding: 10px; color: ##00c1de">主文件</div>

        <div>
          <div style="flex: 1; overflow: hidden">
            <template>
              <eagle-cell
                style="margin-top: 0px; border-radius: 0px"
                v-for="(item, index) in MainAttach"
                :key="index"
              >
                <div style="display: flex">
                  <img
                    style="
                      margin-right: 10px;
                      vertical-align: middle;
                      height: 25px;
                      width: 25px;
                    "
                    v-bind:src="srcValue2(item.AttExt)"
                    alt=""
                  />
                  <div
                    style="color: #1989fa"
                    @click.stop="goFile(item.AttCode)"
                  >
                    {{ item.AttName + item.AttExt }}
                  </div>
                </div>
              </eagle-cell>
            </template>
          </div>
        </div>
      </div>
      <div
        class="coursedetail"
        style="margin-top: 5px"
        v-if="Attachments2.length > 0"
      >
        <div style="padding: 10px; color: ##00c1de">附件</div>
        <eagle-file-format :fileLists="Attachments2"></eagle-file-format>
      </div>

      <div
        class="coursedetail"
        style="margin-top: 5px"
        v-if="Relations.length > 0"
      >
        <div style="padding: 10px; color: ##00c1de">相关制度</div>
        <eagle-file-format :fileLists="Relations"></eagle-file-format>
      </div>

      <!-- <div
        class="coursedetail"
        style="margin-top: 5px"
        v-if="RelationsDate.length > 0"
      >
        <div style="padding: 10px; color: ##00c1de">相关制度</div>
<file-format :fileLists="RelationsDate" ></file-format></div> -->

      <div
        class="coursedetail"
        style="margin-top: 5px"
        v-if="Relations2.length > 0"
      >
        <div style="padding: 10px; color: ##00c1de">历史清单</div>

        <div>
          <div style="flex: 1; overflow: hidden">
            <template>
              <div
                v-for="(item, index) in Relations2"
                :key="index"
              >
                <eagle-file-format :fileLists="item.MainAttach"></eagle-file-format>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import srcValue from "@/utils/srcValue.js";
import { getDate } from "@/utils/getDate.js";
import store from "@/store/index";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      id: this.$route.query.id,
      titleCode: this.$route.query.titleCode,
      isSignature: this.$route.query.isSignature,
      image: "",
      form: {},
      form2: {},
      form3: {},
      form4: {},
      MainAttach: [],
      MainAttach2: [],
      Relations: [],
      Relations2: [],
      Attachments2: [],
      // RelationsDate: [],
      getGuidelineRegGetHistoryApiPageDataList: [],
      isDate: false,
      isDate2: false,
      isDate3: false,
      isDate4: false,
      isDatePublic: true,
      isOnlineName: "",
      filter: {
        sourceCode: "",
        versionType: "",
        currentRegulationCode: "",
      },
    };
  },
  created() {
    if (this.$route.query.titleCode == "RegulationManual") {
      this.geDetail();
    } else if (this.$route.query.titleCode == "RegulationOperation") {
      this.geDetail2();
    } else if (this.$route.query.titleCode == "GuidelineReg") {
      this.getGuidelineRegGetDetail();
    } else if (this.$route.query.titleCode == "GuidelineReg2") {
      this.filter.sourceCode = this.$route.query.SourceCode;
      this.filter.versionType = this.$route.query.VersionType;
      this.filter.currentRegulationCode = this.$route.query.SourceCode;
      console.log("https======originType=>", this.filter);
      this.getGuidelineRegGetDetailBySourceCode(this.$route.query.SourceCode);
      this.getGuidelineRegGetHistoryApiPageData();
    } else if (this.$route.query.titleCode == "GuidelineRegCommonCompile") {
      this.getGuidelineRegCommonCompileGetDetail();
    }
    this.calcTitle();
  },
  methods: {
    calcTitle() {
      let originType = this.$route.query.titleCode;
      let title;
      if (originType == "GuidelineReg") {
        title = "规章制度(程序)详情";
      } else if (originType == "GuidelineRegCommonCompile") {
        title = "安全生产制度汇编详情";
      } else if (originType == "RegulationManual") {
        title = "管理手册详情";
      } else if (originType == "RegulationOperation") {
        title = "操作规程详情";
      } else if (originType == "GuidelineReg2") {
        title = "规章制度(程序)详情";
      }
      console.log("https======originType=>", originType);
      store.commit("updateTitle", title);
    },
    gettimeS(data) {
      return getDate(data);
    },
    srcValue2(AttExt) {
      return srcValue(AttExt);
    },
    myOnLoad() {},
    goFileS(ids) {
      this.id = ids;
      if (this.$route.query.titleCode == "RegulationManual") {
        this.geDetail();
      } else if (this.$route.query.titleCode == "RegulationOperation") {
        this.geDetail2();
      }
    },
    goFile(attachCode) {
      this.$router.push("/Attach/AatachDetail?attCode=" + attachCode);
    },
    // 获取详情
    geDetail2() {
      const param = {
        id: this.id,
      };
      this.$axios
        .get("/GuidelineOperateRule/GetDetail", { params: param })
        .then((res) => {
          this.isDate2 = true;
          this.form2 = res.data;
          this.Relations = res.data.Relations;
          // if(res.data.Attachments2!=null){
          //   this.Attachments2 = JSON.parse(
          //   res.data.Attachments2.replace(/'/g, '"')
          // );
          // }
          if (res.data.MainAttach != null) {
            this.MainAttach = JSON.parse(
              res.data.MainAttach.replace(/'/g, '"')
            );
          }
        });
    },
    getGuidelineRegGetDetailBySourceCode(Codes) {
      const param = {
        Code: Codes,
        id: 0,
      };
      this.$axios
        .get("/GuidelineReg/GetDetailByCode", { params: param })
        .then((res) => {
          this.isDate4 = true;
          this.isDatePublic = false;
          if (res.data.IsOnline) {
            this.isOnlineName = "是";
          } else {
            this.isOnlineName = "否";
          }
          this.form4 = res.data;
          // this.Relations = res.data.Relations;
          this.Attachments2 = res.data.Attachments2;
          this.filter.sourceCode = this.form4.SourceCode;
          this.filter.versionType = this.form4.VersionType;
          this.filter.currentRegulationCode = this.form4.RegulationCode;
          this.Relations = res.data.Relations;
          // this.getGuidelineRegGetHistoryApiPageData();
          // if(res.data.MainAttach!=null){
          // this.MainAttach = JSON.parse(res.data.MainAttach.replace(/'/g, '"'))
          // }
        });
    },
    // 获取详情
    getGuidelineRegCommonCompileGetDetail() {
      const param = {
        id: this.id,
      };
      this.$axios
        .get("/GuidelineRegCommonCompile/GetDetail", { params: param })
        .then((res) => {
          this.isDate3 = true;
          this.isDatePublic = false;
          this.form3 = res.data;
          // this.Relations = res.data.Relations;
          this.Attachments2 = JSON.parse(
            res.data.Attachments2.replace(/'/g, '"')
          );
          if (res.data.MainAttach != null) {
            this.MainAttach = JSON.parse(
              res.data.MainAttach.replace(/'/g, '"')
            );
          }
        });
    },
    // 获取详情
    getGuidelineRegGetDetail() {
      const param = {
        id: this.id,
      };
      this.$axios
        .get("/GuidelineReg/GetDetail", { params: param })
        .then((res) => {
          this.isDate4 = true;
          this.isDatePublic = false;
          if (res.data.IsOnline) {
            this.isOnlineName = "是";
          } else {
            this.isOnlineName = "否";
          }
          this.form4 = res.data;
          // this.Relations = res.data.Relations;
          this.Attachments2 = res.data.Attachments2;
          this.filter.sourceCode = this.form4.SourceCode;
          this.filter.versionType = this.form4.VersionType;
          this.filter.currentRegulationCode = this.form4.RegulationCode;
          this.Relations = res.data.Relations;
          this.getGuidelineRegGetHistoryApiPageData();
          // if(res.data.MainAttach!=null){
          // this.MainAttach = JSON.parse(res.data.MainAttach.replace(/'/g, '"'))
          // }
        });
    },
    getGuidelineRegGetHistoryApiPageData() {
      this.$axios
        .get("/GuidelineReg/GetHistoryApiPageData", { params: this.filter })
        .then((res) => {
          for (var i = 0; i < res.data.Data.length; i++) {
            res.data.Data[i].MainAttach = JSON.parse(
              res.data.Data[i].MainAttach.replace(/'/g, '"')
            );
          }
          this.Relations2 = res.data.Data;
          // this.form4 = res.data;
          // this.Attachments2 = res.data.Attachments2;
          // // if(res.data.MainAttach!=null){
          // // this.MainAttach = JSON.parse(res.data.MainAttach.replace(/'/g, '"'))
          // // }
        });
    },

    // 查看报告
    lookPdf(item, ids) {
      this.$router.push({
        name: "CheckReportDetail2",
        query: {
          url: process.env.VUE_APP_BASE_API + item,
          TypeName: this.titleCode,
          isSignature: this.isSignature,
          IDS: ids,
        },
      });
    },
    // 获取详情
    geDetail() {
      const param = {
        id: this.id,
      };
      this.$axios
        .get("/GuidelineHandBook/GetDetail", { params: param })
        .then((res) => {
          this.isDate = true;
          this.form = res.data;
          this.Relations = res.data.Relations;
          this.Attachments2 = res.data.Attachments2;
          // this.Attachments2 = JSON.parse(
          //   res.data.Attachments2.replace(/'/g, '"')
          // );
          this.MainAttach = JSON.parse(res.data.MainAttach.replace(/'/g, '"'));
        });
    },
  },
};
</script>

<style lang="less">
.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;

    .dep_top_img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
    }
  }

  .det_name {
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-bottom: 20px;
  }
}
.text_box {
  padding: 10px;
  border-radius: 5px;
  /*background-color: #e8f1f8;*/
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    font-size: 12px;
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
    }
  }
}
.input_texts .van-field__control {
  background-color: #ffffff !important;
  padding: 0 !important;
  color: #1989fa;
}
</style>
